<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<% from django.utils.webhelpers import url %>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Usecase Application</title>
<link rel="stylesheet" type="text/css" href="${url('/static/css/bootstrap-1.1.0.css')}">
<script src="${url('/static/js/jquery-1.6.2.js')}"></script>
<script >
    $(document).ready(function(){
        $('#loginbody').hide();
        $('#submitform').hide();
        $("#usecase").hide();
        $("#usecase").fadeIn("slow");
        //console.log("Done")
        //console.log("Message: ${message}");
    });

   
    
</script>

<style type="text/css">
.login_header {display: block;}
.login_header_item:hover {text-decoration: underline;}
.message {display:block;}
.usecasetext {font-size: xx-large; line-height: 1.25em;}
.submittertext {font-size: large;}
.usecasetextarea {width:97%; height:300px; padding:8px;}
.usecasetextareawrapper {margin: 15px 0; padding:3px;}
.controls {font-size: medium;}
.footer {position:absolute; bottom:0px; width:100%; overflow-y:hidden; display:block; background-color:#cfcfcf; border-top: 2px solid #afafaf;}
</style>

</head>
<body>
<div class="container">
    <div id="loginwidget" style="position:absolute; 
                                 top:0px; 
                                 right: 200px; 
                                 width:260px;
                                 border-bottom: 1px solid #8F6FAF; 
                                 border-right: 1px solid #8F6FAF; 
                                 border-left: 1px solid #8F6FAF; 
                                 border-bottom-left-radius: 5px;
                                 border-bottom-right-radius: 5px;
                                 padding: 5px;
                                 background-color: white;">
    % if userstate['isloggedin'] == False:
        <div class="login_header">    
            <center>
            % if message:
                % if error:
                    <span class="message alert-message error">${message}</span>
                % else:
                    <span class="message alert-message info">${message}</span>
                % endif
            % endif
            <span id="loginheader" class="login_header_item btn">Login</span> or <span id="registerheader" class="login_header_item"><a href="${wh.url('/accounts/register')}" class="btn">Register</a></span>
            </center>
        </div>

        <div id="loginbody">
        <%doc>
        <%inherit file="admin/base_site.html"/>
        </%doc>
            <form class="form-stacked" action="${wh.url('login/')}" method="post" id="login-form">${ csrf_tag(csrf_token) }
                <div><!-- class="form-row">-->
                    <label for="id_username">${trans('Username:')}</label> <input type="text" name="username" id="id_username" />
                </div>
                <div> <!--class="form-row">-->
                    <label for="id_password">${trans('Password:')}</label> <input type="password" name="password" id="id_password" />
                    <input type="hidden" name="this_is_the_login_form" value="1" />
                </div>
                <div class="submit-row">
                    <label>&nbsp;</label><input type="submit" value="${trans('Log in')}" />
                </div>
            </form>
        </div>
    % else:
      <div class="logoutheader">
      <center>
        % if message:
            <span class="message alert-message success">${message}</span>
        % endif
        <span>
        % if userstate['isstaff']:
            <a href="admin/" class="btn">Admin</a> or
        % endif
        <a href="logout/" class="btn">Logout</a>
        </span>
      </center>
      </div>
    % endif  
    </div>

    <div style="height: 200px;">
    </div>
    <!--<div class="row">-->
        <div class="span2 columns">
        </div>
        <div class="span2 columns">
            <center>
                <p id="usecase" class="usecasetext">
                    ${description}
                </p>

                    <div id="submitterline" class="submittertext">
                    &mdash; ${submitter}
                </div>
            </center>
            % if userstate['isloggedin']:
                <div id="submitform" class="form-stacked modal" style="width:700px; height:500px;">
                    <div class="modal-header">
                        <h3>Your Suggestion</h3>
                        <a href="#" id="submitclose" class="close">&times;</a>
                    </div>
                    <form action="${wh.url('usecase/submitcase')}" id="usecase_submit_form" method="post" class="usecasetext">${ csrf_tag(csrf_token) }
                    <div class="modal-body">
                        <div class="usecasetextareawrapper">
                        <textarea name="submittext" class="usecasetext usecasetextarea">Type your suggestion here...</textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="submit" class="btn primary" value="${trans('Submit')}" />
                        <a id="submitcancel" class="btn secondary">Cancel</a>
                    </form>
                    </div>
                </div>

             % endif

        </div>
        <div> 
            % if userstate['isloggedin']:
                <span id="submitnew" class="controls btn"><a>New</a></span>
            % endif
                <span id="next" class = "controls btn" style="float:right;"><a href="${wh.url('/')}">Another</a></span>
        </div>
    <!--</div>-->
   </div>

   <div class="footer" scroll="no" overflow="hidden">
        <p style="float:left; vertical-align: middle; margin-left: 10px; margin-top: 5px;">Authorised by Prof Matthew Bellgard, Centre for Comparative Genomics. (c) 2011</p>
        <div style="display: inline; float: right; width:150px;">
            <a href="#"><img src="${url('/static/img/u_logo.png')}" style="float:left; width:25%; opacity: 0.5; vertical-align: bottom;" ></img></a>
            <a href="#" style="width: 75%; float: left; font-style: italic; font-size: medium; font-weight: bold; vertical-align: middle; padding-top:5%; ">Usecase</a>
        </div>
    </div>
<script>

    var loginclicked = function(){
        if ($("#loginbody").is(":hidden")) {
            $("#loginbody").slideDown("fast");
        }
        else {
            $("#loginbody").slideUp("fast");
        }

    }

    var newclicked = function(){
        if ($("#submitform").is(":hidden")) {
            //console.log("submitform was hidden - showing...");
            //$("#usecase").hide();
            $("#submitform").show();
            $("#submitterline").text("\u2014 You");
            //change the text
            //$("#submitnew").text("Cancel");
        }
        else {
            //change the text
            $("#submitnew").text("New");
            $("#usecase").show();
            $("#submitform").hide()
            $("#submitterline").text("\u2014 ${submitter}");
        }
    }


    $("#loginheader").click(loginclicked);
    $("#submitnew").click(newclicked);
    $("#submitclose").click(newclicked);
    $("#submitcancel").click(newclicked);

</script>

</body>
</html>
